<template>
  <div>
    <div style="display: flex; width: 100%">
      <div v-if="activePage">
        <Active @close="handleClose" @gowhapp="show()" class="show"></Active>
      </div>
      <div style="width: 100%; min-width: 56.25rem">
        <!-- 欢迎来到工作台 -->
        <div class="card-wellcom">
          <div style="display: flex">
            <div class="homeblock1">
              <!-- <div class="welcom-title">{{ $t("工作台.欢迎") }}</div> -->
              <!-- 一行 数据 -->
              <!-- <div style="display: flex; flex-wrap: wrap"> -->
              <div style="display: flex; margin-bottom: 24px">
                <!-- 一个数据模块 监控国家/地区-->
                <div style="width: 50%; padding: 0 0.75rem; padding-left: 0;min-width: 12.8rem">
                  <div style="display: flex;border-radius: 8px;background-color: rgb(64, 158, 255);padding: 16px;flex-direction: column;">
                    <div>
                      <img style="width: 2.5rem; height: 2.5rem" src="../assets/img/icon/num1.png"/>
                    </div>
                    <div style="margin-top: 16px;">
                      <div style="display: flex;justify-content: space-between;">
                        <div>
                          <text class="welcom-num-value">{{ Number(number.total_products).toLocaleString('en-US') }}</text>
                          <text class="welcom-num-unit" style="margin-left: 0.2rem"></text>
                        </div>
                      </div>
                      <div class="welcom-num-title">{{ $t("销售品类排名") }}</div>
                      <!-- <div
                        style="font-size: 14px; font-weight: 700; color: #fff"
                      >
                       {{ number.sales_perf}}%
                      </div> -->
                    </div>
                    <div style="border-right: 0.1rem solid #f2f3f5"></div>
                  </div>
                </div>
                <!-- 监控分类数量 -->
                <div style="width: 50%; padding: 0 0.75rem;min-width: 12.8rem">
                  <div style="display: flex;border-radius: 8px;background-color: rgb(39, 39, 42);padding: 16px;flex-direction: column;">
                    <div>
                      <img style="width: 2.5rem; height: 2.5rem" src="../assets/img/icon/num2.png" />
                    </div>
                    <div style="margin-top: 16px;">
                      <div style="display: flex;justify-content: space-between;">
                        <div>
                          <text class="welcom-num-value">{{number.new_products.toLocaleString('en-US')}}</text>
                          <text class="welcom-num-unit" style="margin-left: 0.2rem"></text>
                        </div>
                        <div style="font-size: 14px; font-weight: 700; color: #fff;margin-top: 0.4rem">
                          {{number.new_products_sales_perf}}%
                        </div>
                      </div>
                      <div class="welcom-num-title">{{ $t("每日更新产品数量") }}</div>
                    </div>
                    <div style="border-right: 0.1rem solid #f2f3f5"></div>
                  </div>
                </div>
              </div>
              <div style="display: flex">
                <!-- 监控商品数量 -->
                <div style="width: 50%; padding: 0 0.75rem; padding-left: 0;min-width: 12.8rem">
                  <div style="display: flex;border-radius: 8px;background-color: rgb(39, 39, 42);padding: 16px;flex-direction: column;">
                    <div>
                      <img style="width: 2.5rem; height: 2.5rem" src="../assets/img/icon/num3.png"/>
                    </div>
                    <div style="display: flex;justify-content: space-between;margin-top: 16px;">
                      <div>
                        <div>
                          <text class="welcom-num-value">{{Number(number.new_products_price_total).toLocaleString('en-US')}}</text>
                          <text class="welcom-num-unit" style="margin-left: 0.2rem"></text>
                        </div>
                        <div class="welcom-num-title">
                          {{ $t("销售业绩") }}
                        </div>
                      </div>
<!--                      <div style="font-size: 14px; font-weight: 700; color: #fff">-->
<!--                        {{number.new_products_sales_num_perf}}%-->
<!--                      </div>-->
                    </div>
                    <div style="border-right: 0.1rem solid #f2f3f5"></div>
                  </div>
                </div>
                <!-- 新进TOP100商品数 -->
                <div style="width: 50%; padding: 0 0.75rem;min-width: 12.8rem">
                  <div style="display: flex;border-radius: 8px;background-color: rgb(39, 39, 42);padding: 16px;flex-direction: column;">
                    <div>
                      <img style="width: 2.5rem; height: 2.5rem" src="../assets/img/icon/num4.png"/>
                    </div>
                    <div style="display: flex;justify-content: space-between;margin-top: 16px;">
                      <div>
                        <div>
                          <text class="welcom-num-value">{{Number(number.new_products_category_num).toLocaleString('en-US')}}</text>
                          <text class="welcom-num-unit" style="margin-left: 0.2rem" ></text>
                        </div>
                        <div class="welcom-num-title">
                          {{ $t("每日更新品类数") }}
                        </div>
                      </div>
                      <!-- <div
                        style="font-size: 14px; font-weight: 700; color: #fff"
                      >
                        +55%
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- </div> -->
            </div>
            <div class="card-hot-product" style="margin-left: 1rem;width: 50%;min-width: 41rem">
              <div style="display: flex; white-space: nowrap; width: 100%">
                <div class="wellcom-linechart-title" style="font-weight: 600; line-height: 1.88rem">
                  {{ $t("工作台.饼图.今日热销商品国家占比") }}
                </div>
<!--                <div-->
<!--                  class="hot-more"-->
<!--                  @click="shiftRank()"-->
<!--                  style="cursor: pointer; margin-left: auto"-->
<!--                >-->
<!--                  {{ $t("工作台.表格.查看更多") }}-->
<!--                </div>-->
              </div>
              <div>
                <!-- 饼图 -->
                <div v-show="!isPieChart" v-loading="loading" element-loading-text="Loading..." style="width: 40rem; height: 15rem"></div>
                <div v-show="isPieChart" id="pieChart" style="width: 40rem; height: 15rem"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 表和图 -->
        <div style="display: flex">
          <!-- 热销商品 -->
          <div class="card-hot-product">
            <div style="display: flex">
              <div class="wellcom-table-title" style="font-weight: 600; white-space: nowrap">
                {{ $t("销售品类排名") }}
              </div>
              <div style="font-size: 0.7rem; color: #717a87" class="wellcom-table-title">
                （{{ $t("工作台.表格.TOP10") }}）
              </div>
<!--              <div-->
<!--                class="hot-more"-->
<!--                @click="shiftRank()"-->
<!--                style="cursor: pointer; margin-left: auto"-->
<!--              >-->
<!--                {{ $t("工作台.表格.查看更多") }}-->
<!--              </div>-->
            </div>
            <!-- 表格 -->
            <div style="margin-top: 0.6rem;position: relative" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
            <!-- ref="scrollTable" -->
              <el-table height="220" :data="categoryList" size="small" :header-cell-style="{ background: '#f2f3f8', color: '#101010' }" :row-style="{ height: '35px' }">
                <!-- <el-table-column prop="id" label="Ranking" width="1.88rem"/> -->
                <el-table-column type="index" width="50" label="Rank"/>
                <!-- show-overflow-tooltip -->
                <el-table-column prop="title" :label="tableHeader[0]">
                  <template #default="scope">
                    <div class="showOverTooltip">
                      {{ scope.row.first_cate_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="total_sales" :label="tableHeader[1]" width="100"/>
                <!-- 原来是增长趋势 -->
                <!-- <el-table-column prop="increase_percent" :label="tableHeader[2]" width="90">
                                    <template #default="scope">
                                        <div style="display: flex; align-items: center">
                                            <div v-if="scope.row.increase_direction==1">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="margin-left:0.3rem" src="../assets/img/icon/arrowup.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==-1" style="display: flex;">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="width: 0.625rem;height: 0.625rem;margin:0.4rem 0 0 0.3rem;transform:rotate(180deg);" src="../assets/img/icon/arrowdown.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==0">/</div>
                                        </div>
                                    </template>
                                </el-table-column> -->
              </el-table>
              <!-- 未登录 只显示五条 遮罩层-->
              <div v-show="!isLogin"  class="mask-layer-table">
                <div class="can-not-show1" style="width: 100%">{{ $t('遮罩.去登录') }}</div>
                <div style="width: 100%;display: flex;justify-content: center;margin-top: 0">
                  <el-button style="background-color:#165DFF;color:#fff;height: 2rem;
                  border: none !important;font-size: 12px" @click="shiftRegister()">{{ $t('按钮.注册') }}</el-button>
                </div>
              </div>
            </div>
          </div>

          <div class="card-hot-product">
            <div style="display: flex">
              <div class="wellcom-table-title" style="font-weight: 600; white-space: nowrap" >
                {{ $t("新产品销售排名") }}
              </div>
<!--              <div style="font-size: 0.7rem; color: #717a87" class="wellcom-table-title" >-->
<!--                （{{ $t("工作台.表格.TOP10") }}）-->
<!--              </div>-->
<!--              <div class="hot-more" @click="shiftRank()" style="cursor: pointer; margin-left: auto" >-->
<!--                {{ $t("工作台.表格.查看更多") }}-->
<!--              </div>-->
            </div>
            <!-- 表格 -->
            <div style="margin-top: 0.6rem;position: relative">
              <!-- 表格 -->
                <el-table height="220" :data="gethotsellingList" size="small" :header-cell-style="{background: '#f2f3f8',color: '#101010',}" :row-style="{ height: '35px' }">
                  <!-- <el-table-column prop="id" label="Ranking" width="1.88rem"/> -->
                  <el-table-column prop="country_name" :label="tableHeader[3]" width="140"/>
                  <!-- show-overflow-tooltip -->
                  <el-table-column
                      prop="title"
                      :label="tableHeader[0]"
                  >
                    <template #default="scope">
                      <!-- 带参数跳转 -->
                      <!-- @click="shiftRank(scope.row.first_cate_id,scope.row.country_code)" -->
                      <div class="showOverTooltip">
                        {{ scope.row.category_name }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="total_sales"

                      :label="tableHeader[1]"
                      width="100"
                  />
                </el-table>
                <!-- 未登录 只显示五条 遮罩层-->
                <div v-show="!isLogin"  class="mask-layer-table">
                  <div class="can-not-show1" style="width: 100%">{{ $t('遮罩.去登录') }}</div>
                  <div style="width: 100%;display: flex;justify-content: center;margin-top: 0">
                    <el-button style="background-color:#165DFF;color:#fff;height: 2rem;
                    border: none !important;font-size: 12px" @click="shiftRegister()">{{ $t('按钮.注册') }}</el-button>
                  </div>
                </div>
<!--              <el-table height="220" :data="getnewproductList" size="small" :header-cell-style="{ background: '#f2f3f8', color: '#101010' }" :row-style="{ height: '35px' }">              &lt;!&ndash; <el-table-column prop="id" label="Ranking" width="1.88rem"/> &ndash;&gt;
                <el-table-column type="index" width="50" label="Rank"/>
                &lt;!&ndash; show-overflow-tooltip &ndash;&gt;
               <el-table-column prop="title" :label="tableHeader[0]">
                 <template #default="scope">
                    <div @click="shiftDetail(scope.row.goods_id,scope.row.country_code)"
                     class="showOverTooltip" style="cursor: pointer">
                     {{ scope.row.goods_name }}
                  </div>
                 </template>
              </el-table-column>
                <el-table-column
                 prop="sale_count"
                 :label="tableHeader[1]"
                width="100"
               />-->
                <!-- 原来是增长趋势 -->
                <!-- <el-table-column prop="increase_percent" :label="tableHeader[2]" width="90">
                                    <template #default="scope">
                                        <div style="display: flex; align-items: center">
                                            <div v-if="scope.row.increase_direction==1">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="margin-left:0.3rem" src="../assets/img/icon/arrowup.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==-1" style="display: flex;">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="width: 0.625rem;height: 0.625rem;margin:0.4rem 0 0 0.3rem;transform:rotate(180deg);" src="../assets/img/icon/arrowdown.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==0">/</div>
                                        </div>
                                    </template>
                                </el-table-column> -->
<!--              </el-table>-->
            </div>
          </div>

          <div class="card-hot-product">
            <div style="display: flex">
              <div
                class="wellcom-table-title"
                style="font-weight: 600; white-space: nowrap"
              >
                {{ $t("销售排名") }}
              </div>
              <div
                style="font-size: 0.7rem; color: #717a87"
                class="wellcom-table-title"
              >
                （{{ $t("工作台.表格.TOP10") }}）
              </div>
<!--              <div-->
<!--                class="hot-more"-->
<!--                @click="shiftRank()"-->
<!--                style="cursor: pointer; margin-left: auto"-->
<!--              >-->
<!--                {{ $t("工作台.表格.查看更多") }}-->
<!--              </div>-->
            </div>
            <!-- 表格 -->
            <div style="margin-top: 0.6rem;position: relative">
              <el-table
               height="220"
                :data="getdashboardList"
                size="small"
                :header-cell-style="{ background: '#f2f3f8', color: '#101010' }"
                :row-style="{ height: '35px' }"
              >
                <!-- <el-table-column prop="id" label="Ranking" width="1.88rem"/> -->
                <el-table-column
                  type="index"
                  width="50"
                  label="Rank"
                />
                <!-- show-overflow-tooltip -->
                <el-table-column
                  prop="title"
                  :label="tableHeader[0]"
                >
                  <template #default="scope">
                    <!-- @click="shiftDetail(scope.row.goods_id,scope.row.country)" style="cursor: pointer"-->
                    <div
                      class="showOverTooltip">
                      {{ scope.row.goods_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="total_sales"
                  :label="tableHeader[1]"
                  width="100"
                />
                <!-- 原来是增长趋势 -->
                <!-- <el-table-column prop="increase_percent" :label="tableHeader[2]" width="90">
                                    <template #default="scope">
                                        <div style="display: flex; align-items: center">
                                            <div v-if="scope.row.increase_direction==1">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="margin-left:0.3rem" src="../assets/img/icon/arrowup.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==-1" style="display: flex;">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="width: 0.625rem;height: 0.625rem;margin:0.4rem 0 0 0.3rem;transform:rotate(180deg);" src="../assets/img/icon/arrowdown.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==0">/</div>
                                        </div>
                                    </template>
                                </el-table-column> -->
              </el-table>
              <!-- 未登录 只显示五条 遮罩层-->
              <div v-show="!isLogin"  class="mask-layer-table">
                <div class="can-not-show1" style="width: 100%;">{{ $t('遮罩.去登录') }}</div>
                <div style="width: 100%;display: flex;justify-content: center;margin-top: 0">
                  <el-button style="background-color:#165DFF;color:#fff;height: 2rem;
                      border: none !important;font-size: 12px" @click="shiftRegister()">{{ $t('按钮.注册') }}</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex; margin-top: 16px">
          <div style="width: 60%;background: #fff;border-radius: 8px;padding: 16px;margin-right: 16px;min-width: 47rem">
            <div class="wellcom-linechart-title" style="margin-bottom: 16px;display: flex;justify-content: space-between;">
              <div>
                <text style="font-weight: 600">{{$t("工作台.折线图.全球商品每日销量")}}</text>
                <text style="font-size: 0.7rem; color: #717a87">（ {{ $t("工作台.折线图.近") }} {{ lineChartX.length }}
                  {{ $t("工作台.折线图.日") }} ）</text>
              </div>
              <!-- <div
                style="
                  background-color: rgba(23, 115, 176, 0.5);
                  border-radius: 8px;
                  padding: 3px;
                  display: flex;
                  align-items: center;
                "
              >
                <div
                  v-for="(tab, index) in tabs"
                  :key="index"
                  :class="['tab-item', { active: activeTab === index }]"
                  @click="setActive(index)"
                  style="
                    color: rgba(255, 255, 255, 0.7);
                    font-size: 12px;
                    cursor: pointer;
                  "
                >
                  {{ tab }}
                </div>
              </div> -->
            </div>
            <div style="display: flex; width: 100%;justify-content: center">
              <!-- <div style="width: 10%"></div> -->
              <div>
                <!-- 折线图 -->
                <div v-if="isLogin">
                  <div v-show="!isLineChart" v-loading="loading" element-loading-text="Loading..." style="width: 53.75rem; height: 15rem"></div>
                  <div v-show="isLineChart" id="main" style="width:50rem; height: 15rem"></div>
                </div>
                <div v-else>
                  <div v-show="isLogin" id="main" style="width:50rem; height: 15rem"></div>
                  <!-- 未登录 只显示五条 遮罩层-->
                  <div v-show="!isLogin"  class="mask-layer">
                    <div class="can-not-show2" style="width: 100%">You need to register successfully before you can view the historical trends.</div>
                    <div style="margin-top: 1rem;margin-bottom: 3rem;width: 100%;display: flex;justify-content: center;">
                      <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;border: none !important;" @click="shiftRegister()">{{ $t('按钮.注册') }}</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--表格-->
          <div class="card-hot-product" style="min-width: 19.6rem">
            <div>
              <div style="display: flex">
                <div class="wellcom-table-title" style="font-weight: 600; white-space: nowrap">
                  {{ $t("全国热卖榜") }}
                </div>
                <!-- <div
                  style="font-size: 0.7rem; color: #717a87"
                  class="wellcom-table-title"
                >
                  （{{ $t("工作台.表格.TOP10") }}）
                </div> -->
                <!-- <div
                    class="hot-more"
                    @click="i()"
                    style="cursor: pointer; margin-left: auto"
                  >
                    {{ $t("工作台.表格.查看更多") }}
                  </div> -->
                <!-- 分段器 -->
<!--                <div-->
<!--                  style="-->
<!--                    margin-bottom: 16px;-->
<!--                    cursor: pointer;-->
<!--                    margin-left: auto;-->
<!--                    background-color: rgba(23, 115, 176, 0.5);-->
<!--                    border-radius: 8px;-->
<!--                    padding: 3px;-->
<!--                    display: flex;-->
<!--                    align-items: center;-->
<!--                  "-->
<!--                >-->

<!--                  <div-->
<!--                    v-for="(tab, index) in taba"-->
<!--                    :key="index"-->
<!--                    :class="['tab-item', { active: activeTaba === index }]"-->
<!--                    @click="setActivea(index)"-->
<!--                    style="-->
<!--                      color: rgba(255, 255, 255, 0.7);-->
<!--                      font-size: 12px;-->
<!--                      cursor: pointer;-->
<!--                    "-->
<!--                  >-->
<!--                    {{ tab }}-->
<!--                  </div>-->
<!--                </div>-->

              </div>
            </div>
            <!-- 表格 -->
<!--            <div style="margin-top: 0.6rem" v-if="activeTaba==0">-->
<!--              <el-table-->
<!--                height="220"-->
<!--                :data="gethotsellingList"-->
<!--                size="small"-->
<!--                :header-cell-style="{-->
<!--                  background: '#f2f3f8',-->
<!--                  color: '#101010',-->
<!--                }"-->
<!--                :row-style="{ height: '35px' }"-->
<!--              >-->
<!--                &lt;!&ndash; <el-table-column prop="id" label="Ranking" width="1.88rem"/> &ndash;&gt;-->
<!--                <el-table-column-->
<!--                  type="index"-->
<!--                  width="50"-->
<!--                  label="Rank"-->
<!--                />-->
<!--                &lt;!&ndash; show-overflow-tooltip &ndash;&gt;-->
<!--                <el-table-column-->
<!--                  prop="title"-->
<!--                  :label="tableHeader[0]"-->
<!--                >-->
<!--                  <template #default="scope">-->
<!--                    <div-->
<!--                      @click="-->
<!--                        shiftDetail(-->
<!--                          scope.row.first_cate_id,-->
<!--                          scope.row.country_code-->
<!--                        )-->
<!--                      "-->
<!--                      class="showOverTooltip"-->
<!--                      style="cursor: pointer"-->
<!--                    >-->
<!--                      {{ scope.row.category_name }}-->
<!--                    </div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="total_sales"-->
<!--                  -->
<!--                  :label="tableHeader[1]"-->
<!--                  width="100"-->
<!--                />-->
<!--                &lt;!&ndash; 原来是增长趋势 &ndash;&gt;-->
<!--                &lt;!&ndash; <el-table-column prop="increase_percent" :label="tableHeader[2]" width="90">-->
<!--                                    <template #default="scope">-->
<!--                                        <div style="display: flex; align-items: center">-->
<!--                                            <div v-if="scope.row.increase_direction==1">-->
<!--                                                <span>{{ scope.row.increase_percent }}</span>-->
<!--                                                <img style="margin-left:0.3rem" src="../assets/img/icon/arrowup.svg"/>-->
<!--                                            </div>-->
<!--                                            <div v-else-if="scope.row.increase_direction==-1" style="display: flex;">-->
<!--                                                <span>{{ scope.row.increase_percent }}</span>-->
<!--                                                <img style="width: 0.625rem;height: 0.625rem;margin:0.4rem 0 0 0.3rem;transform:rotate(180deg);" src="../assets/img/icon/arrowdown.svg"/>-->
<!--                                            </div>-->
<!--                                            <div v-else-if="scope.row.increase_direction==0">/</div>-->
<!--                                        </div>-->
<!--                                    </template>-->
<!--                                </el-table-column> &ndash;&gt;-->
<!--              </el-table>-->
<!--            </div>-->
            <div style="margin-top: 0.6rem;position: relative">
              <el-table height="220" :data="getcountryrankingsList" size="small" :header-cell-style="{background: '#f2f3f8',color: '#101010',}" :row-style="{ height: '35px' }">
                <!-- <el-table-column prop="id" label="Ranking" width="1.88rem"/> -->
                <el-table-column prop="country_name" :label="tableHeader[3]" width="120"/>
                <!-- show-overflow-tooltip -->
                <el-table-column prop="title" :label="tableHeader[0]">
                  <template #default="scope">
                    <!-- @click="shiftDetail(scope.row.goods_id,scope.row.country_code)" style="cursor: pointer"-->
                    <div class="showOverTooltip">
                      {{ scope.row.goods_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="total_sales"
                  
                  :label="tableHeader[1]"
                  width="100"
                />
                <!-- 原来是增长趋势 -->
                <!-- <el-table-column prop="increase_percent" :label="tableHeader[2]" width="90">
                                    <template #default="scope">
                                        <div style="display: flex; align-items: center">
                                            <div v-if="scope.row.increase_direction==1">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="margin-left:0.3rem" src="../assets/img/icon/arrowup.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==-1" style="display: flex;">
                                                <span>{{ scope.row.increase_percent }}</span>
                                                <img style="width: 0.625rem;height: 0.625rem;margin:0.4rem 0 0 0.3rem;transform:rotate(180deg);" src="../assets/img/icon/arrowdown.svg"/>
                                            </div>
                                            <div v-else-if="scope.row.increase_direction==0">/</div>
                                        </div>
                                    </template>
                                </el-table-column> -->
              </el-table>
              <!-- 未登录 只显示五条 遮罩层-->
              <div v-show="!isLogin"  class="mask-layer-table">
                <div class="can-not-show1" style="width: 100%">{{ $t('遮罩.去登录') }}</div>
                <div style="width: 100%;display: flex;justify-content: center;margin-top: 0">
                  <el-button style="background-color:#165DFF;color:#fff;height: 2rem;border: none !important;font-size: 12px" @click="shiftRegister()">{{ $t('按钮.注册') }}</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div style="min-width: 2rem"></div> -->
      <!-- <div style="width: 30%;min-width:17.5rem;"> -->
      <!-- 个人信息 -->
      <!-- <div class="card-info">
                    <div class="info-title">{{$t('工作台.个人信息')}}</div> -->
      <!-- 姓名邮箱头像 -->
      <!-- <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div>
                            <div class="info-name">{{userInfo.name}}</div>
                            <div class="info-email">{{userInfo.email}}</div>
                        </div>
                        <div style="margin: 0.7rem 0 0 0.5rem;">
                            <img style="widows:3.13rem ;height: 3.13rem;border-radius: 0.63rem;" src="../assets/img/logo/avatar1.png"/> -->
      <!-- <img style="widows:3.13rem ;height: 3.13rem;border-radius: 0.63rem;" src="../assets/img/image/avatar3.png"/> -->
      <!-- </div>
                    </div> -->
      <!-- 分割线 -->
      <!-- <el-divider style="margin: 0.3rem 0 0 0;"/>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="info-list-title" style="width: 6.25rem;">{{$t('工作台.个人信息.订阅')}}</div>
                        <div v-if="userInfo.subscription !=' '" class="info-list-value" style="width: 9.38rem;">{{userInfo.subscription}}</div>
                        <div v-else class="info-list-value" style="width: 9.38rem;margin-left: auto;">{{$t('None')}}</div>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="info-list-title" style="width: 6.25rem;">{{$t('工作台.个人信息.状态')}}</div>
                        <div v-if="userInfo.is_active == true" class="info-list-value" style="width: 9.38rem;">Active</div>
                        <div v-else class="info-list-value" style="width: 9.38rem;">Inactive</div>
                    </div>
                    <div style="display: flex;white-space: nowrap;justify-content: space-between;">
                        <div class="info-list-title" style="width: 6.25rem;">{{$t('工作台.个人信息.剩余时间')}}</div>
                        <div class="info-list-value" style="width: 9.38rem;">{{userInfo.expired_at}}</div>
                    </div> -->
      <!-- 分割线 -->
      <!-- <el-divider style="margin: 0.1rem 0 0 0;"/>
                    <div style="display: flex;cursor: pointer;justify-content: space-between;" @click="shiftMine()">
                        <div class="info-list-title" style="width: 13.13rem;">{{$t('工作台.个人信息.帐户设置')}}</div>
                        <div style="width: 1.5rem;margin: 0.44rem 0 0 1rem;" >
                            <img src="../assets/img/icon/arrow.svg" />
                        </div>
                    </div>
                    <div style="display: flex;cursor: pointer;justify-content: space-between;" @click="shiftReserve()">
                        <div class="info-list-title" style="width: 13.13rem;">{{$t('工作台.个人信息.管理订阅')}}</div>
                        <div style="width: 1.5rem;margin: 0.44rem 0 0 1rem;" >
                            <img src="../assets/img/icon/arrow.svg" />
                        </div>
                    </div>
                    <div style="display: flex;cursor: pointer;justify-content: space-between;" @click="logout()">
                        <div class="info-list-title" style="width: 13.13rem;">{{$t('工作台.个人信息.退出登录')}}</div>
                        <div style="width: 1.5rem;margin: 0.44rem 0 0 1rem;" >
                            <img src="../assets/img/icon/arrow.svg" />
                        </div>
                    </div>
                </div> -->
      <!-- 开始使用 -->
      <!-- <div class="card-start-guide">
                    <div class="info-title">{{$t('开始使用')}}</div> -->
      <!-- 第一步 -->
      <!-- <div style="display: flex;">
                        <div style="margin-top: 0.7rem;">
                            <img style="width: 1.56rem;height: 1.56rem;" src="../assets/img/icon/step1.svg" />
                        </div>
                        <div>
                            <div class="guide-subtitle">{{$t('注册平台账号')}}</div>
                            <div class="guide-beizhu">{{$t('预计1分钟')}}</div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="margin-top: 0.7rem;">
                            <img style="width: 1.56rem;height: 1.56rem;" src="../assets/img/icon/step2.svg" />
                        </div>
                        <div>
                            <div class="guide-subtitle">{{$t('订阅服务')}}</div>
                            <div class="guide-beizhu">{{$t('赠送3天Pro')}}</div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="margin-top: 0.7rem;">
                            <img style="width: 1.56rem;height: 1.56rem;" src="../assets/img/icon/step3.svg" />
                        </div>
                        <div>
                            <div class="guide-subtitle">{{$t('绑定店铺')}}</div>
                            <div class="guide-beizhu">{{$t('支持店铺')}}</div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="margin-top: 0.7rem;">
                            <img style="width: 1.56rem;height: 1.56rem;" src="../assets/img/icon/step4.svg" />
                        </div>
                        <div>
                            <div class="guide-subtitle">{{$t('商品添加到店铺')}}</div>
                            <div class="guide-beizhu">{{$t('一键添加')}}</div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="margin-top: 0.7rem;">
                            <img style="width: 1.56rem;height: 1.56rem;" src="../assets/img/icon/step5.svg" />
                        </div>
                        <div>
                            <div class="guide-subtitle">{{$t('订单发货')}}</div>
                            <div class="guide-beizhu">{{$t('从平台订货发货')}}</div>
                        </div>
                    </div>
                </div>
            </div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import Active from '@/components/ActiveHome.vue'
import { getUser } from "../apis/user";
import {updateUrl,getUrl} from '../apis/whatsapp'
import {  getLineChart1, getPieChart1 } from "../apis/home";
import { getnewproduct,getRankProducts, getcategoryProducts,getdashboard,gethotselling,getcountryrankings,getproductsummary } from "../apis/rank";
import {buttonClick} from "@/util/buttonClick";
// import header from "@/components/HeaderNav.vue";
// import left from "@/components/LeftAside.vue";
export default {
  name: "MyComponent",
  data() {
    return {
    //   scrollAmount: 0,
    //   scrollInterval: null, // 存储滚动的定时器
    //   isPaused: false, // 是否暂停滚动
      activePage:false,
      tabs: ["综合数据", "互动数据"],
      taba: ["categories", "products"],
      activeTab: 0, // 当前激活的 tab 索引
      activeTaba: 0, // 当前激活的 tab 索引
      loading: true,
      // 是否加载完折线图的数据
      isLineChart: false,
      // 是否加载完饼图的数据
      isPieChart: false,
      // number:["7","2300","1610000","12000"],
      userInfo: {
        name: "",
        invite_code: "",
        email: "",
        subscription: "",
        expired_at: "",
        is_active: false,
        register_date: "",
      },
      number: {
        country_count: 0,
        cate_count: 0,
        product_count: 0,
        new_top_100: 0,
        new_products_category_num:null,
        new_products_price_total:null,
        new_products:0,
        new_products_sales_num:null,
        new_products_sales_perf:null,
        total_products:null,
      },
      tableHeader: [
        this.$t("工作台.表格.标题"),
        this.$t("工作台.表格.销量"),
        this.$t("工作台.表格.昨日涨幅"),
        this.$t("工作台.表格.国家"),
      ],
      getdashboardList:[],
      gethotsellingList:[],
      getcountryrankingsList:[],
      getnewproductList:[],
      categoryList: [],
      lineChartValue: [],
      lineChartX: [],
      pieChartValue: [],
      pieLegend1: [],
      pieLegend2: [],
      myChart: null,
      pie: null,
      rankList: [],
      pageParams: {
        page: 1,
        pagesize: 10,
      },
      isLogin:false,
    };
  },
  components:{
    Active:Active,
  },
  created() {
    // this.$gtm.trackView({ page: this.$route.path, gtm: this.$route.meta.gtm });
    let a = JSON.parse(localStorage.getItem('myinfo'))
    this.activePage = !a;
    // 取token 判断是否是登录状态
    const token = localStorage.getItem('token')
    this.isLogin = !!token;
  },
  mounted() {
    // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
    this.$gtm.trackView({ page: this.$route.path, gtm: this.$route.meta.gtm });


    this.myChart = echarts.init(document.getElementById("main"));
    this.pie = echarts.init(document.getElementById("pieChart"));
    this.getUserInfo();
    this.getMonitorInfo();
    this.getLinechartData();
    this.drawLine();
    this.getPiechartData();
    this.drawPie();
    this.getRankList();
    this.getcateProducts();
    this.gethotsellings()
    this.getcountryrankingss()
    // 1
    this.getdashboards();
    this.getnewproducts()
//     this.$nextTick(() => {
//     this.startAutoScroll();
//   });
  },
  methods: {
    handleClose() {
      // 执行关闭逻辑
      this.activePage = false
    },
    async show() {
      const pagePath = window.location.href; // 当前页面 URL
      const buttonName = 'whatsapp' // 按钮名称
      buttonClick(pagePath, buttonName);
      try {
        // 更新 URL
        const updateRes = await updateUrl();
        if (updateRes.code !== 200 || updateRes.status !== 1) {
          console.error('Failed to update URL:', updateRes);
          return;
        }
        // 获取最新的 URL
        const getRes = await getUrl();
        if (getRes.code !== 200 || getRes.status !== 1) {
          console.error('Failed to get URL:', getRes);
          return;
        }
        // 设置组件内的 URL 属性
        this.url = getRes.data;
        // console.log('Updated URL:', this.url);

        // 确保在获取到正确的 URL 后再打开新窗口
        window.open(this.url, '_blank');
      } catch (error) {
        console.error('Error during URL operations:', error);
      }
    },
    // startAutoScroll() {
    //   const scrollContainer = this.$refs.scrollTable.$el.querySelector(".el-scrollbar__wrap");
    //   let scrollAmount = 0;

    //   setInterval(() => {
    //     scrollAmount += 0.5; // 每次滚动1像素
    //     scrollContainer.scrollTop = scrollAmount;

    //     if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
    //       // 滚到底部时重置
    //       scrollAmount = 0;
    //     }
    //   }, 16); // 滚动速度
    // },
    // startAutoScroll() {
    //     const scrollContainer = this.$refs.scrollTable.$el.querySelector(".el-scrollbar__wrap");
    //   const smoothScroll = () => {
    //     if (this.isPaused) return; // 如果暂停，则不进行滚动
    //     this.scrollAmount += 0.5; // 每次滚动 0.5 像素
    //     scrollContainer.scrollTop = this.scrollAmount;

    //     if (
    //       scrollContainer.scrollTop + scrollContainer.clientHeight >=
    //       scrollContainer.scrollHeight
    //     ) {
    //       // 滚动到底部时重置
    //       this.scrollAmount = 0;
    //     }
    //   };

    //   this.scrollInterval = setInterval(smoothScroll, 16); // 每 16ms 滚动一次
    // },

    // pauseScroll() {
    //   this.isPaused = true; // 设置暂停状态
    // },
    // resumeScroll() {
    //   this.isPaused = false; // 恢复滚动
    // },
    setActive(index) {
      this.activeTab = index; // 设置当前激活的 tab
    },
    setActivea(index) {
      this.activeTaba = index; // 设置当前激活的 tab
    },
    // 获取用户信息
    getUserInfo() {
      getUser().then((res) => {
        if (res.code == 200 && res.status == 1) {
          this.userInfo = res.data;
          localStorage.setItem("myinfo", JSON.stringify(this.userInfo));
        }
      });
    },
    // 获取监控数据
    getMonitorInfo() {
      getproductsummary().then((res) => {
        if (res.code == 200 && res.status == 1) {
          this.number = res.data;
        }
      });
    },
    // 获取折线图信息
    getLinechartData() {
      getLineChart1().then((res) => {
        if (res.code == 200 && res.status == 1) {
          for (var i in res.data.lists) {
            this.lineChartX.push(res.data.lists[i].log_date.slice(5, 10));
            this.lineChartValue.push(res.data.lists[i].cnt);
          }
          this.isLineChart = true;
          // 更新图表数据
          this.updateChart();
        }
      });
    },
    // 获取饼图信息
    getPiechartData() {
      getPieChart1().then((res) => {
        if (res.code == 200 && res.status == 1) {
          let t_data = [];
          let legend_data = [];
          for (let i in res.data.lists) {
            if(res.data.lists[i].country ==='Portugal'){
              res.data.lists[i].country = 'Canada'
            }else if(res.data.lists[i].country ==='European Union'){
              res.data.lists[i].country = 'America'
            }
            t_data.push({
              name: res.data.lists[i].country,
              // value:parseFloat(res.data.lists[i].percent.replace('%', ''))/100
              value: res.data.lists[i].cnt,
            });
            legend_data.push(res.data.lists[i].country);
          }
          this.pieChartValue = t_data;
          for (let i in legend_data) {
            if (i < 4) {
              this.pieLegend1.push(legend_data[i]);

            } else {
              this.pieLegend2.push(legend_data[i]);
            }
          }
          console.log('this.pieLegend1', this.pieLegend1)
          this.isPieChart = true;
          this.updateChart1();
        }
      });
    },
    // 更新折线图
    updateChart() {
      this.myChart.setOption({
        xAxis: {
          data: this.lineChartX,
        },
        series: [
          {
            name: this.$t("折线图.图例.销量"),
            data: this.lineChartValue,
          },
        ],
      });
    },
    // 更新饼图
    updateChart1() {
      this.pie.setOption({
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            data: this.pieChartValue,
            radius: ["30%", "60%"], // 设置内外半径，调整大小
            center: ["20%", "50%"], // 调整饼图位置，水平偏向左侧
            label: {
              show: false,
              position: "center",
            },
          },
        ],
        legend: {
          bottom: "center", // 图例位于底部
          right: 16, // 图例居中对齐
          x: '50%', // 设置图例距离左侧10%的位置
          data: [...this.pieLegend1, ...this.pieLegend2], // 合并图例数据
        },
      });
    },
    // 获取排名列表
    // getRankList() {
    //   getRankProducts(this.pageParams).then((res) => {
    //     if (res.code == 200 && res.status == 1) {
    //       for (let i in res.data.lists) {
    //         this.rankList.push(res.data.lists[i]);
    //       }
    //       console.log("热销榜", this.rankList);
    //     }
    //   });
    // },
    getRankList() {
      getRankProducts(this.pageParams).then((res) => {
        if (res.code == 200 && res.status == 1) {
          // 只获取前五条记录
          const topFive = res.data.lists.slice(0, 5);
          this.rankList = [...this.rankList, ...topFive]; // 合并到已有数据中
        }
      });
    },
    getcateProducts() {
      getcategoryProducts().then((res) => {
        if (res.code == 200 && res.status == 1) {
          if(this.isLogin){
            this.categoryList = res.data;
          }else{
            this.categoryList = res.data.slice(0,3);
          }
        }
      });
    },
    getdashboards() {
      getdashboard().then((res) => {
        if (res.code == 200 && res.status == 1) {
          if(this.isLogin){
            this.getdashboardList = res.data;
          }else{
            this.getdashboardList = res.data.slice(0,3);
          }
        }
      });
    },
    gethotsellings() {
      gethotselling().then((res) => {
        if (res.code == 200 && res.status == 1) {
          if(this.isLogin){
            this.gethotsellingList = res.data;
          }else{
            this.gethotsellingList = res.data.slice(0,3);
          }
        }
      });
    },
    getnewproducts() {
      getnewproduct().then((res) => {
        if (res.code == 200 && res.status == 1) {

          this.getnewproductList = res.data; // 合并到已有数据中
         
        }
      });
    },
    getcountryrankingss() {
      getcountryrankings().then((res) => {
        if (res.code == 200 && res.status == 1) {
          if(this.isLogin){
            this.getcountryrankingsList = res.data;
          }else{
            this.getcountryrankingsList = res.data.slice(0,3);
          }
        }
      });
    },
    shiftReserve() {
      this.$router.push("/subscribe/reserve");
    },
    // 跳转到注册页面
    shiftRegister(){
      this.$router.push('/register')
    },
    shiftRank(id,code) {
      // console.log(id,code)
      // 跳转新标签页
      if(id && code){
        this.$router.push({
              path:'/panel/rank2',
              query:{
                  id:id,
                  country: code,
              }
          })
      }
      else{
        this.$router.push("/panel/rank2");
      }
    },
    shiftDetail(id, country) {
      // this.$router.push({
      //     path:'/panel/detail2',
      //     query:{
      //         id:id
      //     }
      // })
      // 跳转新标签页
      let routeData;
      if(country){
           routeData = this.$router.resolve({
            name: "detail2",
            query: {
              id: id,
              country: country,
              returnUrl: window.location.href, // 记录当前页面的 URL
            },
          });
      }else{
         routeData = this.$router.resolve({
            name: "detail2",
            query: {
              id: id,
              country: 'es',
              returnUrl: window.location.href, // 记录当前页面的 URL
            },
          });
      }
      window.open(routeData.href, "_blank");
    },
    // 折线图
    drawLine() {
      //echart图表本身是提供了一个resize的函数 多个图表可以使用addEventListener 自适应
      // window.addEventListener("resize", () => { this.myChart.resize();});
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: "",
        },
        // animation:false,
        tooltip: {
          // trigger:'axis',
          // formatter: function(params) {
          //     var result = '';
          //     for (var i = 0; i < params.length; i++) {
          //         result += params[i].name + '<br />';
          //         result += params[i].seriesName + ': ' + params[i].value + '<br />';
          //     }
          //     return result;
          // },
          // axisPointer: { type: 'cross' }
        },
        xAxis: {
          type: "category",
          // 坐标轴
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: this.$t("折线图.图例.销量"),
            type: "line",
            // 数据
            data: [],
            smooth: true,
          },
        ],
        //整体边距
        grid: {
          x: 110,
          y: 40,
          x2: 40,
          y2: 40,
        },
      });
    },
    // 饼图
    drawPie() {
      // window.addEventListener("resize", () => { this.pie.resize();});
      this.pie.setOption({
        series: [
          {
            type: "pie",
            label: {
              formatter: "{b}\n{d}%",
            },
            data: [],
            itemStyle: {
              borderRadius: 2,
            },
            // radius: '50%'
            // 圆环
            radius: ["35%", "55%"],
            // 此系列调色盘。
            color: [
              "#249EFF",
              "#21CCFF",
              "#313CA9",
              "#F2BD42",
              "#EE752F",
              "#D95040",
              "#5087EC",
            ],
          },
        ],
        // 图例
        legend: [
          {
            shoe: true,
            orient: "vertical",
            bottom: "bottom",
            data: [],
            x: '50%', // 设置图例距离左侧10%的位置
            y: "89%",
          },
          {
            shoe: true,
            orient: "vertical",
            bottom: "bottom",
            data: [],
            x: "left",
            y: "95%",
          },
        ],
      });
    },
    // 退出登录
    logout() {
      localStorage.clear();
      ElMessage({
        message: this.$t("工作台.个人信息.退出成功"),
        grouping: true,
        type: "success",
      });
      this.getUserInfo();
    },
  },
  /* eslint-disable vue/no-deprecated-destroyed-lifecycle */
//   beforeDestroy() {
//     // 清理定时器
//     clearInterval(this.scrollInterval);
//   },
  /* eslint-enable vue/no-deprecated-destroyed-lifecycle */
};
</script>

<style lang="scss" scoped>
page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mask-layer-table{
  width: 100%;
  min-width: 20.6rem;
  position: absolute;
  margin-top: -85px;
  box-sizing: border-box;
  height: 100px;
  /*background-color: rgba(222, 222,222, 0.5);*/
  font-size: 13px;
  color: #111;
}
.can-not-show1{
  padding-top: 0.7rem;
  height: 2rem;
  line-height: 1rem;
  text-align: center;
}
.mask-layer{
  width: 50rem;
  min-width: 100%;
  box-sizing: border-box;
  height: 240px;
  /*background-color: rgba(222, 222,222, 0.5);*/
  font-size: 16px;
  color: #111;
}
.can-not-show2{
  padding-top: 3rem;
  width: 36.25rem;
  height: 3.13rem;
  line-height: 1.5rem;
  text-align: center;
}
.card-wellcom {
  margin-bottom: 16px;
  box-sizing: border-box;
  //   padding: 1rem;
  //   min-width: 56.25rem;
  width: 100%;
  //   height: 32.5rem;
  //   border-radius: 0.31rem;
  //   background-color: rgba(255, 255, 255, 1);
  .welcom-title {
    width: 19.38rem;
    height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    font-weight: 600;
    font-size: 18px;
    text-align: left;
    font-family: AlibabaPuHui-medium;
  }
  .welcom-num-title {
    // margin: 0 0 0 1rem;
    // width: 8.13rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: #fff;
    font-size: 0.85rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .welcom-num-value {
    // margin: 0 0 0 1rem;
    width: 1.25rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: #fff;
    font-size: 1.38rem;
    font-weight: 600;
    text-align: left;
    font-family: AlibabaPuHui-medium;
  }
  .welcom-num-unit {
    margin-top: 1rem;
    width: 0.94rem;
    height: 1.25rem;
    line-height: 1.25rem;
    color: rgba(78, 89, 105, 1);
    font-size: 0.75rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .wellcom-linechart-title {
    width: 53.75rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
}
.card-info {
  box-sizing: border-box;
  padding: 1rem;
  margin-left: 1.25rem;
  min-width: 17.5rem;
  width: 60%;
  min-height: 20.63rem;
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 1);
  .info-name {
    margin: 1rem 0 0 0;
    width: 11.88rem;
    height: 1.56rem;
    line-height: 1.56rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    font-family: AlibabaPuHui-bold;
  }
  .info-email {
    width: 11.88rem;
    height: 1.56rem;
    line-height: 1.56rem;
    color: rgba(134, 144, 156, 1);
    font-size: 0.75rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .info-list-title {
    height: 2.5rem;
    line-height: 2.5rem;
    color: rgba(134, 144, 156, 1);
    font-size: 0.88rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .info-list-value {
    height: 2.5rem;
    line-height: 2.5rem;
    color: rgba(22, 93, 255, 1);
    font-size: 0.88rem;
    text-align: right;
    font-family: AlibabaPuHui-regular;
  }
}
.info-title {
  width: 16.25rem;
  height: 1.88rem;
  color: rgba(16, 16, 16, 1);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  font-family: AlibabaPuHui-regular;
}
.card-start-guide {
  box-sizing: border-box;
  padding: 1rem;
  margin: 1.25rem 0 0 1.25rem;
  min-width: 17.5rem;
  width: 60%;
  height: 23.13rem;
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 1);
  .guide-subtitle {
    margin: 0.7rem 0 0 1rem;
    width: 13.44rem;
    height: 1.56rem;
    line-height: 1.56rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .guide-beizhu {
    margin-left: 1rem;
    width: 13.44rem;
    height: 1.56rem;
    line-height: 1.56rem;
    color: rgba(134, 144, 156, 1);
    font-size: 0.75rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
}
.card-hot-product {
  margin-right: 16px;
  box-sizing: border-box;
  padding: 1rem;
  //   height: 30rem;
  min-width: 22.6rem;
  //   max-width: 432px;
  width: 50%;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 0.88rem;
  font-family: Roboto;
  .wellcom-table-title {
    margin-bottom: 16px;
    // width: 20rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    // font-size: 1rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .hot-more {
    margin: 0.1rem 0 0 8.5rem;
    width: 3.13rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(22, 93, 255, 1);
    font-size: 0.75rem;
    text-align: right;
    font-family: AlibabaPuHui-regular;
  }
}
/* el-divider 修改高度效果 */
.el-divider--horizontal {
  margin: 1rem 0;
  //  background: 0 0;
  border-top: 0.1rem solid #f2f3f5;
}
.showOverTooltip {
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.homeblock1 {
  width: 50%;
  // height: 167px;
  //   background: green;
  //   border-radius: 8px;
  //   margin-bottom: 16px;
  //   padding: 20px;
  //   padding-bottom: 36px;
}
.tab-item.active {
  color: #fff !important;
  //   background-color: rgba(0, 0, 0,0.6);
  background-color: rgba(194, 240, 212, 0.4);
  border-radius: 8px;
  font-weight: bold;
}
.tab-item:nth-child(1) {
  margin-right: 3px;
}
.tab-item {
  padding: 5px;
}
</style>
